<template>
  <div class="searchTop">
    <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
    <use xlink:href="#icon-zuojiantou"></use>
    </svg>
    <input type="search" placeholder="张国荣" v-model="searchKey" @keydown.enter="enterKey">
  </div>
  <div class="searchHistory">
  <span class="searchSpan">历史</span>
  <span class="searchKey" v-for="item in keyWordList" :key="item" @click="getMusic(item)">
  {{ item }}
  </span>
  <svg class="icon" aria-hidden="true" @click="delHistory">
     <use xlink:href="#icon-shanchu"></use>
  </svg>
  </div>
  <div class="itemBottom" v-for="(item, i) in searchMusic" :key="i">
    <i>{{i+1}}</i>
    <div class="Music" @click="palyMusic(item)">
       <span class="musicTitle">{{item.name}}</span> 
       <div class="musicAuthor">
    <span v-for="(j, index) in item.ar" :key="index">{{ j.name }}&nbsp;</span>
    </div>
    </div>
    <svg class="icon" aria-hidden="true" v-if="item.mv!==0">
         <use xlink:href="#icon-shipin1"></use>
    </svg> 
    <svg class="icon icon-right" aria-hidden="true">
         <use xlink:href="#icon-liebiao2"></use>
    </svg> 
    </div>
</template>
<script>
import {getMusicSearch} from '@/request/api/home'
export default {
  data() {
    return {
      keyWordList:[],
      searchKey:'' ,
      searchMusic:[]
    }
  },
  mounted(){
     if(JSON.parse(localStorage.getItem("keyWordList"))){
      this.keyWordList= JSON.parse(localStorage.getItem("keyWordList"))
     }
    console.log(this.$router)
  },
  methods:{
     async enterKey(){
     if(this.searchKey!==''){
      this.keyWordList.unshift(this.searchKey)
      this.keyWordList = [...new Set(this.keyWordList)]
      if(this.keyWordList.length>10){
        this.keyWordList.splice(this.keyWordList.length-1,1) 
      }
      localStorage.setItem("keyWordList",JSON.stringify(this.keyWordList))
      const {data:res} = await getMusicSearch(this.searchKey)
       this.searchMusic =res.result.songs
       console.log(this.searchMusic)
       this.searchKey = ''
     }
    },
    delHistory(){
      localStorage.removeItem('keyWordList')
      this.keyWordList=[]
    },
    async getMusic(item){
      const {data:res} = await getMusicSearch(item)
      this.searchMusic = res.result.songs
      console.log(this.searchMusic )
    },
    palyMusic(item){
      this.$store.commit('pushPlayList',item)
      this.$store.commit('updatePlayListIndex',this.$store.state.playList.length-1)
    }
  }
}
</script>
<style lang="scss" scoped>
  .searchTop{
    width: 100%;
    height: 1rem;
    display: flex;
    align-items: center;
    padding: .3rem;
    input{
      width: 85%;
      padding: .1rem;
      margin-left: .2rem;
      border: none;
      border-bottom: 1px solid #999;
    }
  }
  .searchHistory{
    width: 100%;
  
    position:relative;
    
    .searchSpan{
      margin-left: .3rem;
      font-weight: 700;
    }
    .searchKey{
      margin: .1rem .2rem;
      padding: .1rem .2rem;
      background-color: #999;
      border-radius: .4rem;
      color: azure;
      display: inline-block;
    }
    .icon{
      position: absolute;
      right: .2rem;
    }
  }

  .itemBottom {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .1rem .3rem ;
  i{
    width:10%;
    height:100%;
    line-height: 1rem;
    text-align: center;
    font-style: normal;
  padding-right: .1rem;
  }
  .Music{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  .musicTitle{
    font-size: .28rem;
     font-weight: 600;
  }
  .musicAuthor{
    font-size: .24rem;
    color: #ccc;
    padding-top: .04rem;
  }
  }
  .icon-right{
    margin-left:.2rem;
  }
}
</style>